<template>
  <div class="hand-drawn-card" :class="cardClass" @click="$emit('click', $event)">
    <div class="card-content" ref="cardContentRef">
      <svg
        ref="svgRef"
        class="hand-drawn-border"
        :width="svgWidth"
        :height="svgHeight"
      ></svg>
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed, nextTick, watch, onUnmounted } from "vue";
import rough from "roughjs";

interface Props {
  variant?: "default" | "primary" | "secondary" | "accent";
  size?: "small" | "medium" | "large";
  animated?: boolean;
  interactive?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  variant: "default",
  size: "medium",
  animated: true,
  interactive: true,
});

const emit = defineEmits<{
  click: [event: MouseEvent];
}>();

const cardContentRef = ref<HTMLElement>();
const svgRef = ref<SVGSVGElement>();
const svgWidth = ref(200);
const svgHeight = ref(100);
const borderOverflow = 0;
let resizeObserver: ResizeObserver | null = null;

const cardClass = computed(() => [
  `hand-drawn-card--${props.variant}`,
  `hand-drawn-card--${props.size}`,
  {
    "hand-drawn-card--animated": props.animated,
    "hand-drawn-card--interactive": props.interactive,
  },
]);

onMounted(async () => {
  await nextTick();
  if (cardContentRef.value && svgRef.value) {
    updateSvgSize();
    drawHandDrawnBorder();

    // 设置 ResizeObserver 监听尺寸变化
    resizeObserver = new ResizeObserver(() => {
      nextTick(() => {
        if (cardContentRef.value && svgRef.value) {
          updateSvgSize();
          drawHandDrawnBorder();
        }
      });
    });
    resizeObserver.observe(cardContentRef.value);
  }
});

// 组件卸载时清理 ResizeObserver
onUnmounted(() => {
  if (resizeObserver) {
    resizeObserver.disconnect();
    resizeObserver = null;
  }
});

const updateSvgSize = () => {
  if (!cardContentRef.value) return;
  svgWidth.value = cardContentRef.value.offsetWidth + borderOverflow * 2;
  svgHeight.value = cardContentRef.value.offsetHeight + borderOverflow * 2;
};

const drawHandDrawnBorder = () => {
  if (!svgRef.value) return;
  svgRef.value.innerHTML = "";
  const svg = rough.svg(svgRef.value);
  const borderColor = getBorderColor();
  // 只画一条线
  for (let i = 0; i < 2; i++) {
    const mainRect = svg.rectangle(0, 0, svgWidth.value, svgHeight.value, {
      stroke: borderColor,
      strokeWidth: 0.5 + i * 0.3,
      roughness: 2.5,
      seed: Math.random() * 1000 + i,
      fill: "none",
      curveStepCount: 8,
    });
    svgRef.value.appendChild(mainRect);
  }
};

const getBorderColor = () => {
  const colors = {
    default: "#fff",
    primary: "#ffe066",
    secondary: "#aee9f5",
    accent: "#ffb7c5",
  };
  return colors[props.variant];
};
</script>

<style lang="scss" scoped>
.hand-drawn-card {
  position: relative;
  margin: 12px 0;
  border-radius: 8px;
  transition: all 0.3s ease;
  font-family: "Comic Sans MS", "Marker Felt", cursive;
  padding: 0;
  color: #fff;

  &--small {
    margin: 0;
  }
  &--medium {
    margin: 0;
  }
  &--large {
    margin: 24px 0;
  }
  &--animated {
    animation: handDrawnFadeIn 0.6s ease-out;
  }
  &--interactive {
    cursor: pointer;
    &:hover {
      transform: translateY(-2px);
      .hand-drawn-border {
        filter: brightness(1.1);
      }
    }
    &:active {
      transform: translateY(0);
    }
  }
  
  .card-content {
    position: relative;
    background: transparent;
    padding: 0;
    z-index: 2;
    height: 100%;
    color: inherit;
  }
  &--small .card-content {
    padding: 0;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .hand-drawn-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
    display: block;
  }
  .card-content > *:not(.hand-drawn-border) {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
  }
}
@keyframes handDrawnFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 统一所有设备的样式，移除设备特定的差异 */
.hand-drawn-card {
  padding: 0;
  margin: 12px 0;
  
  &--small .card-content {
    padding: 0;
  }
  &--medium .card-content {
    padding: 0;
  }
  &--large .card-content {
    padding: 0;
  }
}
</style>
